<template>

	<body>
		<div class="loan_nav col_nav">
			<ul>
				<li>
					<a href="javascript:history.go(-1)">
						<i class="iconfont">&#xe61e;</i>
					</a>
				</li>
				<li>
					<p>个人中心</p>
				</li>
				<li>
					<!-- <router-link to="login">
						<p>切换</p>
					</router-link> -->
				</li>
			</ul>
		</div>
		<div class="interval_T">

		</div>
		<div class="modify">
			<ul>
				<li>
					<p>头像
						<span v-if="!user.icon" style="color:#ccc">(点击右侧图片可更改头像)</span>
					</p>
				</li>
				<li>
					<div class="head_pic">
						<img :src="user.icon" width="100%">
						<input @change="upload" ref="iconFile" type="file" class="file_t" accept="image/*">
					</div>
				</li>
			</ul>
			<router-link tag="ul" to="authentication">
				<li>
					<p>用户名</p>
				</li>
				<li>
					<p class="col-gray">{{user.memberName ? user.memberName : '姓名（未认证）'}}</p>
				</li>
				<li>
					<i class="iconfont">&#xe690;</i>
				</li>
			</router-link>
			<div class="crude_line"></div>
			<ul>
				<li>
					<p>账户绑定</p>
				</li>
				<li></li>
			</ul>
			<router-link tag="ul" to="bindingphone">
				<li>
					<p>手机</p>
				</li>
				<li>
					<p class="col-gray">{{user.mobile}}</p>
				</li>
				<li>
					<i class="iconfont">&#xe690;</i>
				</li>
			</router-link>
			<router-link tag="ul" to="/replace">
				<li>
					<p>我的银行卡</p>
				</li>
				<li>
					<p class="col-gray"></p>
				</li>
				<li>
					<i class="iconfont">&#xe690;</i>
				</li>
			</router-link>
			<div class="crude_line"></div>
			<router-link tag="ul" to="/moreSetting">
				<li>
					<p>更多信息</p>
				</li>
				<li>
					<i class="iconfont">&#xe690;</i>
				</li>
			</router-link>

			<div class="crude_line"></div>
			<ul>
				<li>
					<p>安全设置</p>
				</li>
				<li></li>
			</ul>
			<router-link tag="ul" to="loginpassword">
				<li>
					<p>登入密码</p>
				</li>
				<li>
					<i class="iconfont">&#xe690;</i>
				</li>
			</router-link>
			<router-link tag="ul" to="paymentpassword">
				<li>
					<p>支付密码</p>
				</li>
				<li>
					<p class="col-gray">{{user.extractPwd}}</p>
				</li>
				<li>
					<i class="iconfont">&#xe690;</i>
				</li>
			</router-link>
		</div>
	</body>
</template>

<script>
export default {
	data() {
		return {
			user: {}
		}
	},
	created() {
		this.query()
	},
	methods: {
		query() {
			this.$http.get('/app/member/userInfo').then(json => {
				const { code, user } = json
				if (code === 0) {
					this.user = user
				}
			})
		},
		upload() {
			const vm = this
			let file = vm.$refs.iconFile.files[0]
			let formData = new FormData()
			formData.append('file', file)

			this.$http.post('/admin/upload', formData).then(json => {
				const { code, fileUrl } = json
				if (code === 0) {
					this.$http.post('/app/member/icon', {
						icon: fileUrl
					}).then(json => {
						const { code } = json
						if (code === 0) {
							this.$vux.toast.show({ text: '上传成功' })
							this.query()
						}
					})
				}
			})
		}
	}
}
</script>